<template>
  <div
    :id="cId"
    :style="`width:${chartSize.width}px;height:${chartSize.height}px;`"
  ></div>
</template>

<script>
import { defineComponent, ref, computed, onMounted, nextTick } from "vue";
export default defineComponent({
  name: "Qxt",
});
</script>
<script setup>
// 引入
import * as echarts from "echarts";

const props = defineProps(["cId", "yLabelText", "data", "theme", "lineTitle"]);

const cId = ref("qxt");

const chartSize = ref({
  width: 275,
  height: 160,
});

// title
const lineTitle = ref("水质实时得分");

// current theme Color
const currentThemeColorIdentification = ref("orange");

// data
const qxtData = ref([
  {
    name: "00:00",
    num: 1.07,
  },
  {
    name: "06:00",
    num: 4.17,
  },
  {
    name: "12:00",
    num: 1.93,
  },
  {
    name: "18:00",
    num: 1.55,
  },
]);

// color Data
const colorData = ref([
  {
    // 标识
    identification: "blue",
    // 移入虚线标尺颜色
    scaleplateColor: "rgba(98, 126, 181, 1)",
    // 渐变阴影填充颜色
    gradientShadowColor: ["rgba(36, 107, 253, 0.5)", "rgba(2, 154, 254, 0)"],
    // 拐点阴影颜色
    dotShadowColor: "rgba(36, 107, 253, 0.5)",
    // 曲线颜色
    curveColor: "rgba(36, 107, 253, 1)",
  },
  {
    // 标识
    identification: "green",
    // 移入虚线标尺颜色
    scaleplateColor: "rgba(129, 166, 145, 1)",
    // 渐变阴影填充颜色
    gradientShadowColor: ["rgba(11, 246, 99, 0.5)", "rgba(11, 246, 99, 0)"],
    // 拐点阴影颜色
    dotShadowColor: "rgba(11, 246, 99, 0.5)",
    // 曲线颜色
    curveColor: "rgba(34, 246, 106, 1)",
  },
  {
    // 标识
    identification: "orange",
    // 移入虚线标尺颜色
    scaleplateColor: "rgba(230, 206, 178, 1)",
    // 渐变阴影填充颜色
    gradientShadowColor: [
      "rgba(255, 143, 64, 0.5)",
      "rgba(255, 139, 56, 0.01)",
    ],
    // 拐点阴影颜色
    dotShadowColor: "rgba(255, 143, 64, 0.5)",
    // 曲线颜色
    curveColor: "rgba(254, 145, 42, 1)",
  },
]);

// color Comp
const colorComp = computed(() => {
  return colorData.value.filter(
    (item) => item.identification == currentThemeColorIdentification.value
  );
});

onMounted(() => {
  // console.log(colorComp.value);
  // 赋值
  // cId.value = props.cId;
  // yLabelText.value = props.yLabelText;
  // qxtData.value = props.data;
  // currentThemeColorIdentification.value = props.theme;
  // lineTitle.value = props.lineTitle
});

// xAxis Data Comp
const xAxisDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.name);
  });
  return retArr;
});

// Line Data Comp
const lineDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.num);
  });
  return retArr;
});

// 图表初始化
const init = async () => {
  let dom = document.getElementById("qxt");
  let qxtChart = echarts.init(dom);

  // series中数据
  const seriesData = [1.07, 4.17, 1.93, 1.55];

  let option = {
    backgroundColor: "#020f23",
    // color: ["rgba(36,107,253,1)"],
    tooltip: {
      trigger: "axis",
      textStyle: { color: "#fff", fontSize: 12 },
      className: "tooltip",
      order: "seriesDesc",
      renderMode: "html",
      backgroundColor: "#1b366a", // 设置背景颜色
      borderColor: "#1b366a", // 边框颜色
      formatter: (params) => {
        return `
            ${params[0].seriesName}
            <br/>
            <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${
              colorComp.value[0].curveColor
            };"></span>
             ${params[0].name} :
            ${
              params[0].value == 0
                ? "-"
                : Number(params[0].value).toLocaleString()
            } 分`;
      },
      axisPointer: {
        lineStyle: {
          width: 1,
          // 移入虚线标尺颜色
          color: colorComp.value[0].scaleplateColor,
        },
      },
    },
    grid: {
      left: 12,
      right: 12,
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          interval: 0, // 不隔断直接显示
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        data: xAxisDataComp.value,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            type: [6, 8],
            dashOffset: 1,
            width: 1,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: 12,
          formatter: function (value) {
            return `${value}次`;
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: lineTitle.value,
        type: "line",
        data: lineDataComp.value,
        symbol: "circle",
        smooth: true,
        showSymbol: false,
        // cursor: "default",
        width: 2,
        symbolSize: 2, //标记的大小

        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  // 渐变阴影填充颜色
                  color: colorComp.value[0].gradientShadowColor[0],
                },
                {
                  offset: 1,
                  color: colorComp.value[0].gradientShadowColor[1],
                },
              ],
              false
            ),
            shadowColor: "rgba(36, 107, 253, 0)",
            shadowBlur: 2,
          },
        },
        itemStyle: {
          //折线拐点标志的样式
          normal: {
            color: "white",
            borderWidth: 18,
            // shadowColor: "rgba(72,216,191, 0.5)",
            shadowBlur: 60,
            // 拐点阴影颜色
            borderColor: colorComp.value[0].dotShadowColor,
          },
        },
        lineStyle: {
          normal: {
            // 曲线颜色
            color: colorComp.value[0].curveColor,
            shadowColor: "rgba(0, 0, 0, 0)",
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
      },
    ],
  };
  qxtChart.setOption(option);
};

// nextTick异步
nextTick(() => {
  init();
});

// 初始化
onMounted(() => {});
</script>
